<@override name="content">
<div class="header">
  <h1 class="page-title">队员管理</h1>
</div>
<ul class="breadcrumb">
  <li>
    <a href="admin">首页</a>
    <span class="divider">/</span>
  </li>
  <li class="active">用户管理</li>
</ul>
<div class="row">
  <div class="span8 offset2">
    <table id="user-list" class="table table-hover table-condensed">
      <thead>
      <tr>
        <th>UID</th>
        <th>Name</th>
        <th>Nick</th>
        <th>Real Name</th>
        <th>Action</th>
      </tr>
      </thead>
      <tbody>
        <#if members??>
          <#list members as User>
          <tr class="user" uid="${User.uid!}">
            <td class="pid">
              <a href="user/profile/${User.name!}" title="${User.realName!}" target="_blank">${User.uid!}</a>
            </td>
            <td class="name"><a href="user/profile/${User.name!}" target="_blank">${User.name!}</a></td>
            <td class="nick"><a href="user/profile/${User.nick!}" target="_blank">${User.nick!}</a></td>
            <td class="realName">${User.realName!}</td>
            <td class="admin">
              <button class="btn btn-danger remove" uid="${User.uid!}">Remove</button>
            </td>
          </tr>
          </#list>
        </#if>
      <tr>
        <form class="form-inline" id="addMember" action="/api/admin/addMember" method="post">
          <td><input type="number" name="uid" class="input-small" placeholder="User ID" min="1000" required></td>
          <td><input type="text" name="name" class="input-large" placeholder="Name" required></td>
          <td><input type="text" name="nick" class="input-large uneditable-input" placeholder="Nick" disabled></td>
          <td><input type="text" name="realName" class="input-large uneditable-input" placeholder="Real Name" disabled></td>
          <td>
            <button type="submit" class="btn btn-success">Add</button>
          </td>
        </form>
      </tr>
      </tbody>
    </table>
  </div>
</div>
</@override>

<@override name="styles">
<link rel="stylesheet" href="assets/jquery.artDialog/skins/twitter.css" type="text/css">
</@override>

<@override name="scripts">
<link href="assets/tablecloth/css/tablecloth.css" rel="stylesheet" type="text/css">
<script src="assets/tablecloth/js/jquery.metadata.js"></script>
<script src="assets/tablecloth/js/jquery.tablecloth.js"></script>

<script src="assets/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="assets/jquery.artDialog/jquery.artDialog.js"></script>

<script type="text/javascript">
  $(document).ready(function () {
    function getUserInfo() {
      var uid = this.value;
      if (uid >= 1000) {
        $.get("/api/user/full", {uid: this.value},
                function (data) {
                  if (data.success) {
                    $("input[name='name']").val(data.name);
                    $("input[name='nick']").val(data.nick);
                    $("input[name='realName']").val(data.realName);
                  } else {
                    $("input[name='name']").val('');
                    $("input[name='nick']").val('');
                    $("input[name='realName']").val('');
                  }
                });
      }
      else {
        $("input[name='name']").val('');
        $("input[name='nick']").val('');
        $("input[name='realName']").val('');
      }
    }

    $("input[name='uid']").change(getUserInfo).keyup(getUserInfo);

    function getUserInfoByName() {
      var name = this.value;
      if (name.length >= 4) // for old user name, e.g: 'test'
      {
        $.get("/api/user/full", {name: this.value},
                function (data) {
                  if (data.success) {
                    $("input[name='uid']").val(data.uid);
                    $("input[name='nick']").val(data.nick);
                    $("input[name='realName']").val(data.realName);
                  } else {
                    $("input[name='uid']").val('');
                    $("input[name='nick']").val('');
                    $("input[name='realName']").val('');
                  }
                });
      }
      else {
        $("input[name='uid']").val('');
        $("input[name='nick']").val('');
        $("input[name='realName']").val('');
      }
    }

    $("input[name='name']").change(getUserInfoByName).keyup(getUserInfoByName);

    <#if oj_style != "slate">
      $("#user-list").tablecloth({
        theme: "stats",
        condensed: true,
        sortable: false,
        striped: true,
        clean: true
      });
    </#if>

    $(function () {
      $('#addMember').submit(function () {
        var that = $(this);
        var cid = $('input[name=cid]').val();
        var uid = $('input[name=uid]').val();
        var name = $('input[name=name]').val();
        var nick = $('input[name=nick]').val();
        var realName = $('input[name=realName]').val();
        $.post($(this).attr("action"), $('#addMember').serialize(),
                function (data) {
                  switch (data.result) {
                    case 0:
                      var html = '<tr class="user" uid="' + uid + '">' +
                              '<td class="uid"><a href="user/profile/' + name + '" target="_blank">' + uid + '</a></td>' +
                              '<td class="name"><a href="user/profile/' + name + '" target="_blank">' + name + '</a></td>' +
                              '<td class="nick"><a href="user/profile/' + name + '" target="_blank">' + nick + '</a></td>' +
                              '<td class="realName">' + realName + '</td>' +
                              '<td class="admin"><button class="btn btn-danger remove" uid="' + uid + '">Remove</button></td>' +
                              '</tr>';
                      that.parent().before(html);
                      $("input[name='uid']").val('');
                      $("input[name='name']").val('');
                      $("input[name='nick']").val('');
                      break;
                    case 1:
                      $.dialog({
                        content: 'This user does not exist.',
                        time: 1
                      });
                      break;
                    case 2:
                      $.dialog({
                        content: 'User is already member.',
                        time: 1
                      });
                      break;
                    case 3:
                      $.dialog({
                        content: 'Cannot add this user, it\'s admin.',
                        time: 1
                      });
                      break;
                    case 4:
                      $.dialog({
                        content: 'Database error!',
                        time: 1
                      });
                      break;
                  }
                });
        return false;
      });
      $('table').on('click', '.remove', function () {
        var that = $(this);
        $.dialog({
          title: 'Remove user from members',
          content: 'Are you sure?',
          cancelVal: 'Cancel',
          cancel: true,
          okVal: 'Remove',
          ok: function () {
            $.post('/api/admin/removeMember', {uid: that.attr('uid')}, function (data) {
              switch (data.result) {
                case 0:
                  that.parent().parent().remove();
                  $.dialog({
                    content: 'Member removed.',
                    time: 1
                  });
                  break;
                case 1:
                  $.dialog({
                    content: 'This user does not exist!',
                    time: 1
                  });
                  break;
                case 2:
                  $.dialog({
                    content: 'User is not a member!',
                    time: 1
                  });
                  break;
                case 3:
                  $.dialog({
                    content: 'Database error!',
                    time: 1
                  });
                  break;
              }
            });
            this.close();
            return false;
          }
        });
      });
    });
  });
</script>
</@override>
<@extends name="../_layout.html"></@extends>
